<template lang="pug">
  div
    s-table.tabContent(
      ref="table"
      :column="tableObj.column"
      :filterProps="{items: filterItems}"
      :queryFn="tableObj.getList"
      title="预警人员"
      )
      template(slot="action" slot-scope="scope, text")
        a(href="javascript:" @click="historyHandle(scope.id)") 历史预警记录
    el-dialog(
      title="人员信息"
      :visible.sync="infoObj.visible"
      append-to-body
    )
      form-info(:items="infoItems" title="基本信息" :rightSpan="6")
        a-image(:url="infoObj.info.url" height="100%")
      s-table(
        ref="modalTable"
        :column="infoObj.column"
        :queryFn="infoObj.getList"
        :pageSize="5"
        title="历史预警次数"
      )
      p(slot="footer")
        el-button(@click="infoObj.visible = false") 取消
        el-button(type="danger" :loading="infoObj.submitting" @click="inBlack") 列入疑似违规人员库
</template>
<script>
import { STable, ModalForm, FormInfo, AImage } from '@/components'
import { getPersonList } from '@/api/libary'

const column = [
  {
    prop: 'personId',
    label: '姓名',
    align: 'center'
  },
  {
    prop: 'name',
    label: '身份证',
    align: 'center'
  },
  {
    prop: 'idcard',
    label: '预警次数',
    align: 'center'
  },
  {
    prop: 'birthday',
    label: '最近预警时间',
    align: 'center'
  },
  {
    prop: 'action',
    label: '操作',
    align: 'center'
  }
]

const column_record = [
  {
    prop: 'personId',
    label: '预警时间',
    align: 'center'
  },
  {
    prop: 'name',
    label: '预警类型',
    align: 'center'
  },
  {
    prop: 'idcard',
    label: '处理状态',
    align: 'center'
  }
]

export default {
  components: {
    STable,
    ModalForm,
    FormInfo
  },
  computed: {
    filterItems () {
      return [
        {
          key: 'keywords',
          label: '关键信息'
        },
        {
          key: 'addDate',
          label: '预警时间',
          type: 'daterange'
        }
      ]
    },
    infoItems () {
      const { info } = this.infoObj
      return [
        { title: '姓名', key: 'name', content: info.name, required: true },
        { title: '身份证号码', key: 'idCard', content: info.idCard, required: true },
        { title: '性别', key: 'sex', content: info.sex, required: true }
      ]
    }
  },
  data () {
    return {
      tableObj: {
        column,
        getList: getPersonList
      },
      infoObj: {
        id:'',
        loading: false,
        visible: false,
        info: {},
        column:column_record,
        getList: getPersonList,
        submitting: false
      }
    }
  },
  methods: {
    // 查看预警记录
    historyHandle (id) {

    },
    // 列入违规人员库
    inBlack () {

    }
  }
}
</script>
